<template>
  <div style="padding: 2%;">
    <div class="flex-column">
      <div class="ledSystemBox">
        <div class="ledSystemBox-header">工作方式</div>
        <div class="ledSystemBox-list" style="color: #aa0000;">
          <span>u = 0</span>
          <el-divider direction="vertical"></el-divider>
          <span>关灯</span>
        </div>
        <div class="ledSystemBox-list" style="color: #00aa00;">
          <span>u = 1</span>
          <el-divider direction="vertical"></el-divider>
          <span>开灯</span>
        </div>
      </div>
      <div style="margin-left: 20%;">
        <el-card class="box-card" shadow="always" body-style="background: #fff1eb;">
          <div slot="header" class="clearfix">
            <span class="card-header">工作原理</span>
            <el-button type="text" class="card-header-btn" @click="isShow = true" v-show="isShow == false">编辑</el-button>
            <el-button class="card-header-btn" type="text" v-show="isShow" @click="isShow = false">提交</el-button>
          </div>
          <div class="el-card-text item">
            {{textValue}}
          </div>
        </el-card>
      </div>
    </div>
    <div class="systemArcHeader m-t2">系统架构图</div>
    <div class="flex-column m-t2">
      <img src="../../../assets/img/systemArc.jpg" />
      <img src="../../../assets/img/systemArc.png" class="m-l2"/>
    </div>
    <el-dialog title="编辑" :visible.sync="isShow" class="dialog-box">
      <el-input type="textarea" v-model="textValue"></el-input>
      <div slot="footer">
        <el-button type="primary" @click="isShow = false">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'ledSystemArchitecture',
    data() {
      return {
        textValue: '用户通过WiFi将命令发送给网关。进而将命发送给令单片机。单片机处理串口获取并读取的数据信息,读取数据状态,更新数据u,读取GPIO状态d,若u=d,则不会执行,若u≠d,则执行命令。最后读取GPIO口的信息,并将信息返还给串口。',
        isShow: false
      }
    },
    methods: {
    },
    mounted() {

    }
  }
</script>

<style>

</style>
